<template>
  <div>
    <!-- 角色界面 -->
    <div style="margin: 20px 0" class="btn_box">
      <!-- 创建 -->
      <el-button type="primary" @click="handleAdd">创建角色</el-button>
      <!-- 权限 -->
      <el-button type="primary" 
      :disabled="currentRow == null ? true : false"
      @click="roleAuthVisible = true"
        >设置角色权限</el-button>
    </div>
    <!-- 数据列表 动态数据 高亮当前 -->
    <el-table
      class="role_table"
      ref="singleTable"
      :data="roleList"
      highlight-current-row
      @current-change="handleCurrentChange" 
      style="width: 100%"
      border
      height="380"
    >
    <!-- 表头 -->
      <el-table-column type="index" width="60" label="序号"></el-table-column>
      <el-table-column property="name" label="角色名称"></el-table-column>
      <el-table-column
        property="create_time"
        label="创建时间"
        :formatter="resetDate"
      ></el-table-column>
      <el-table-column
        property="auth_time"
        label="授权时间"
        :formatter="resetDate"
      ></el-table-column>
      <el-table-column property="auth_name" label="授权人"></el-table-column>

      <!-- <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row._id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column> -->

    </el-table>

     <!-- 添加角色对话框 -->
    <el-dialog 
    v-model="roleFormVisible" 
    title="添加角色" 
    width="500px"
   >
    <el-form :model="role" ref="roleFormRef" label-width="100px" label-position="right" style="width:400px"  :rules="rules">
      <el-form-item label="角色名称" prop='name'>
        <el-input v-model="role.name" placeholder="请输入角色名称" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="addData(roleFormRef)">
          确定
        </el-button>
        <el-button @click="roleFormVisible = false">取消</el-button>        
      </span>
    </template>
  </el-dialog>
    <!-- 设置角色权限弹窗 -->
    <el-dialog v-model="roleAuthVisible" title="这是角色权限" width="500px">   
      <Auth 
      :role="currentRow" 
      v-if="roleAuthVisible" 
      ref="authRef"></Auth>   
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="updateData">确定</el-button>
          <el-button @click="roleAuthVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
/** 固定方法 */
// Vue提供方法
import {reactive,ref,onMounted,nextTick} from "vue"
// Element-Plus提供类型
import { FormInstance,FormRules, ElMessageBox, ElMessage } from "element-plus";


import Auth from "./components/Auth.vue";


/** 获取时间数据--创建|授权 */
  import {formateDate} from "@/utils/dateUtils"
  const resetDate = (row:any,colum:any,cellValue:number,index:number)=>{
      return formateDate(cellValue)
    }

/** 获取当前项 */
  // 当前选中的行
  let currentRow = ref(null)
  // 当前项变更
  const handleCurrentChange = (val:any)=>{
    currentRow.value = val
  }

/** 读取角色列表部分*/
  // 引入角色类型
  import type {roleInfoData} from "@/api/role/type"
  //引入角色库
  import useRoleStore from "@/store/modules/role"
  let useStore = useRoleStore();
  // 定义角色列表动态存储变量
  let roleList = ref<roleInfoData[]|undefined>([]);
  // 角色列表获取
  const getRoleList = ()=>{
    // 状态码判断-成功接收数据
    useStore.roleList().then(()=>{
      roleList.value = useStore.roles
    })
  }
// 页面加载后执行角色表获取函数
  onMounted(()=>{
    console.log(useStore.roles);
    getRoleList();
    console.log(Auth);
  })
/** 创建角色部分 */
  // 角色添加-弹窗显示状态
  const roleFormVisible=ref(false)
  // 使用ref获取的添加-弹窗
  const roleFormRef=ref<FormInstance>()
  //添加校验规则
  const rules = reactive<FormInstance>({
    // @ts-ignore
    name:[
      {
        required:true,
        message:"请输入角色名称",
        trigger:"blur"
      }
    ],
  })
  // 添加角色点击事件
  const handleAdd = ()=>{
      // 添加-弹窗显示状态--true
      roleFormVisible.value=true
      nextTick(()=>{
        // 添加-弹窗状态重置{resetFields()重置表单所有字段}
        roleFormRef.value.resetFields()
      })
    }
  // 点击确定后的提交
  const addData=(formEl:FormInstance|undefined)=>{
    // 判空操作
    if(!formEl) return
    formEl.validate(async (valid)=>{
      if(valid){
        // 状态判断
        useStore.useAddRole(role).then(response=>{
          // 隐藏添加弹窗
        roleFormVisible.value =false;
          // 重新获取角色列表
        getRoleList()
        })
      }else{
        return false
      }
    })
  }

/** 设置角色权限部分 */
  // 引入用户库
  import useUserStore from "@/store/modules/user";
  let userStore = useUserStore()
  // 定义角色信息动态存储变量
  let role=reactive({
      name:"",
    })
  // 角色权限-弹窗显示状态
  const roleAuthVisible =ref(false)


  // 更新数据
  const authRef=ref()
  const updateData=()=>{
    const newRole=authRef.value.getMenus()
    currentRow.value.menus=newRole.menus
    currentRow.value.name=newRole.name
    currentRow.value.auth_name=userStore.user?.username
    useStore.useUpdateRole(currentRow.value).then((response)=>{
      roleAuthVisible.value =false
      getRoleList()
    }).catch()
  }


</script>

<style>
</style>